<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="奖品名称" prop="prizeName">
        <el-input v-model="form.prizeName" placeholder="奖品名称" maxlength="30" class="col"></el-input>
      </el-form-item>
      <el-form-item label="奖品类型" prop="prizeType">
        <el-select v-model="form.prizeType" placeholder="请选择">
          <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否商家奖品" prop="bussesType" v-if="form.prizeType===1">
        <el-select v-model="form.bussesType" placeholder="请选择" class="col">
          <el-option
              v-for="item in isBussesIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请填写领取地址" prop="address" v-if="form.prizeType===1&&form.bussesType===0">
        <el-input v-model="form.address" placeholder="领取地址" maxlength="30" class="col"></el-input>
      </el-form-item>
      <el-form-item label="选择商家" prop="bussesType" v-if="form.prizeType===1&&form.bussesType===1">
        <el-select v-model="form.businessId" filterable placeholder="请选择" class="col">
          <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.businessName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效时长(天)" prop="effectiveDuration" v-if="form.prizeType===1">
        <el-input v-model="form.effectiveDuration" type="number" placeholder="有效时长(天)" maxlength="30" class="col"
                  @input="handleInput"
                  controls
                  controls-position="right"
                  :min="1"></el-input>
        <span style="color: red;font-weight: bold;">此处是配置抽到奖品后未领取?日过期</span>
      </el-form-item>
      <el-form-item label="中奖概率" prop="weight">
        <el-input v-model="form.weight" placeholder="中奖概率" maxlength="30" type="number" class="col"></el-input>
      </el-form-item>
      <el-form-item label="奖品数量" prop="prizeValue">
        <el-input v-model="form.prizeValue" placeholder="奖品数量" maxlength="1000" class="col"></el-input>
      </el-form-item>
      <el-form-item label="奖品图片" prop="cover">
        <div style="display: flex;align-items: center;">
          <el-image v-if="form.prizeImage" :src="imageUrl + form.prizeImage" class="img"
                    referrerpolicy="no-referrer"></el-image>
          <el-button type="primary" @click="uploads.show=true" size="mini">选择图片</el-button>
        </div>
      </el-form-item>
      <el-form-item label="数值" prop="value" v-if="form.prizeType===3 || form.prizeType===2">
        <el-input v-model="form.value" placeholder="数值" maxlength="1000" class="col"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                   @click="handlerSubmit('form')" v-has-permi="['admin:image:save']">保存
        </el-button>
        <!--        <el-button @click="close">取消</el-button>-->
      </el-form-item>
    </el-form>
    <el-dialog
        :visible.sync="uploads.show"
        title="上传封面"
        :append-to-body="true"
        destroy-on-close
        :close-on-click-modal="false"
        width="1000px">
      <UploadFile
          v-if="uploads.show"
          :multiple="uploads.multiple"
          @getFile="getFile"
          ref="uploads"
      />
    </el-dialog>
  </div>
</template>
<script>
import {Debounce} from '@/utils/validate'
import UploadFile from "@/components/File/UploadFile.vue";
import {list} from "@/api/business";

export default {
  components: {UploadFile},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
    indexKey: {
      type: Number,
      default: () => {
        return -1
      }
    }
  },
  data() {
    return {
      form: {
        id: null,
        gameId: '',
        prizeName: '',
        currentNum: 0,
        prizeType: '',
        prizeValue: '',
        value: '',
        weight: '',
        pid: '',
        prizeImage: '',
        bussesType: 0,
        address: '',
        businessId: '',
        effectiveDuration: 1
      },
      isBussesIdList: [{id: 1, name: '商家'}, {id: 0, name: '赋能店'}],
      classList: [],
      rules: {
        prizeName: [{required: true, message: '请填写商品名称', trigger: ['blur']}],
        bussesType: [{required: true, message: '请选择是否属于商家奖品', trigger: ['blur']}],
        prizeType: [{required: true, message: '请选择奖品类型', trigger: ['blur']}],
        weight: [{required: true, message: '请填写中奖概率', trigger: ['blur']}],
        prizeValue: [{required: true, message: '请填写奖品数量', trigger: ['blur']}],
      },
      roles: [],
      imageUrl: '',
      saveLoading: false,
      formLoading: false,
      uploads: {
        show: false,
        multiple: false,
      },
      typeList: [{id: 1, name: '实物'}, {id: 2, name: '益积分'}, {id: 3, name: '益联券'}, {id: 4, name: '谢谢参与'}],
      editKey: {
        type: Number,
        required: true,
        default: -1,
      },
    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
    if (this.isCreate === 1) {
      this.getDetail();
    }
    this.getBusinessList();
  },
  methods: {
    handleInput(value) {
      if (value < 1) {
        this.form.effectiveDuration = 1;
      }
    },
    getFile(fileList) {
      this.form.prizeImage = fileList[0].url
      this.uploads.show = false
    },
    getBusinessList() {
      list({page: 1, limit: 5000}).then(res => {
        this.classList = res.list
      })
    },
    getDetail() {
      const {
        pid,
        gameId,
        prizeName,
        prizeType,
        weight,
        value,
        prizeValue,
        currentNum,
        prizeImage,
        bussesType,
        address,
        businessId,
        effectiveDuration
      } = JSON.parse(JSON.stringify(this.editData)) //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.form.gameId = gameId
      this.form.pid = pid
      this.form.prizeName = prizeName
      this.form.prizeType = prizeType
      this.form.weight = weight
      this.form.value = value
      this.form.prizeValue = prizeValue
      this.form.currentNum = currentNum
      this.form.prizeImage = prizeImage
      this.form.bussesType = bussesType
      this.form.address = address
      this.form.businessId = businessId
      this.form.effectiveDuration = effectiveDuration

    },
    handlerSubmit: Debounce(function (form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        if (this.form.prizeType == 3) {

          if (!this.form.value) {
            this.$message.error("请填写积分数")
            return;
          }
        }
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    handlerSave() {
      this.$emit('addHideSaveEditDialog', this.form)

    },
    handlerEdit() {
      this.$emit('addHideEditDialog', this.form, this.indexKey)
    },
    close() {
      this.$emit('editListDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  width: 100px;
  height: 100px;
}

.col {
  //width: 400px;
}
</style>
